<template>
	<view class="Warpper" :style="{'--color':color}">
		<view class="navBack" :style="navBack_height">
			<view class="nav_box" :style="nav_box_height">
				<view class="Back" @click="$back()">
					<view class="iconfont icon-xiangzuo size32"></view>
				</view>
			</view>
		</view>


		<view class="Band" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view class="swiperBox" :style="showBrandstyle">
				<swiper class="Swiper" circular :autoplay="true" @change="changeSwiper" :interval="3000"
					:duration="1500">
					<swiper-item v-for="(item,index) in Brand_info.photoArr" :key="index">
						<image :src="$imgUrls(item)" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="Info" v-if="Show">
					<view class="brand_info ">
						<text class="ellipsis_3 brand_info_text">{{Brand_info.brand_info}}</text>
						<view class="swiperNum flexac a-self-end">
							<text class="size30">{{current}}</text>
							<text class="size26"> / {{photoAll}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="branDetails" :class="{'showDetails':!Show}">
				<image :src="$imgUrls(Brand_info.brand_img)" mode="aspectFit" class="brand_logo"></image>
				<view class="details_info">
					<text class="brand_name ellipsis">{{Brand_info.brand_name}}</text>
					<view class="row j-sb a-center">
						<view class="branNum" v-if="Brand_info.goodsNum">共{{Brand_info.goodsNum}}个商品</view>
						<view class="details" @click="toUrl(`brandDetails?brand_id=${brand_id}`)">品牌详情</view>
					</view>
				</view>
			</view>
		</view>



		<view class="Sort">
			<view class="SortPop" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
				v-if="Show"></view>
			<view class="topSort">
				<view class="top-level" v-for="(item,index) in structure" :key="item.classify_id"
					:class="{'activate':index == classifyIndex}" @click="ToggleSort(item,index)">
					{{item.classify_name}}
				</view>
			</view>
			<view class="scrollBox ">
				<scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="scrollIntoView"
					class="scroll-list nowrap" v-if="subclass && subclass.length">
					<view class="sublevel" :id="`sub${index}`" v-for="(item,index) in subclass" :key="index"
						:class="{'subActive':classify_id == item.classify_id}" @click.stop="subToggleSort(item,index)">
						{{item.classify_name}}
					</view>
				</scroll-view>



				<scroll-view scroll-y="true" class="scroll-View" :class="{'p-top80':subclass && subclass.length}"
					@scrolltolower="scrolltolower" :scroll-top="scrollTop" @scroll="Scroll">
					<brandProduct :pageData="pageData"></brandProduct>
				</scroll-view>

			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import brandProduct from '../components/brandProduct.vue'
	import Api from '@/common/Api.js'
	export default {
		components: {
			brandProduct
		},
		data() {
			return {
				Brand_info: '',
				brand_id: '',
				classifyIndex: 0,
				classify_id: 0,
				page: 1,
				pageNum: 10,
				loadMore: true,
				current: 1,
				Show: false,
				structure: [],
				pageData: [],
				scrollTop: 0,
				eventscrollTop: 0,
				scrollIntoView: '',
				startY: 0, // 触摸起始Y坐标
				moveY: 0, // 移动时的Y坐标
				isSlidingDown: 0, // 1 向下滑 2 向上滑 

			}
		},
		onLoad(opt) {
			if (opt.brand_id) this.brand_id = opt.brand_id;
			this.getGoodsBrandInfo();
			this.allUpList();
		},
		methods: {

			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
			},
			handleTouchMove(event) {
				this.moveY = event.touches[0].clientY;
				if (this.moveY > this.startY) {
					this.isSlidingDown = 1
				} else if (this.startY > this.moveY) {
					this.isSlidingDown = 2
				} else {
					this.isSlidingDown = 0
				}

			},
			handleTouchEnd(event) {
				if (!this.isSlidingDown) return;
				if (this.isSlidingDown == 1) {
					this.Show = true;
				} else if (this.isSlidingDown == 2) {
					this.Show = false;
				}

			},


			async getGoodsBrandInfo() {
				const Result = await Api.BrandInfo(this.brand_id)
				this.Brand_info = Result;
			},

			allUpList() {
				this.$http.post({
					url: '/singleSaleApi/allUpList',
					data: {
						classify_cate: 0,
						brand_id: this.brand_id
					}
				}).then(res => {
					if (res.errcode !== '100') return this.$Toast(res.msg);
					const Result = res.structure || [];
					this.structure = Result;
					if (Result.length) this.classify_id = Result[0].classify_id;
					this.sortClassGoods();
				})
			},
			sortClassGoods() {
				const {
					classify_id,
					page,
					pageNum
				} = this;
				this.$http.post({
					url: '/singleSaleApi/sortClassGoods',
					data: {
						classify_id,
						page,
						pageNum,
						classify_cate: 0,
						brand_id: this.brand_id
					}
				}).then(res => {
					if (res.code !== 100) return this.$Toast(res.msg);
					const Result = res.data.DataArr || [];
					page == 1 ? this.pageData = Result : this.pageData = [...this.pageData, ...Result];
					if (Result.length < pageNum) return this.loadMore = false;
				})
			},

			ToggleSort(Item, index) {
				this.scrollTop = this.eventscrollTop;
				this.classifyIndex = index;
				this.classify_id = Item.classify_id;
				this.updateData();
			},
			subToggleSort(Item, index) {
				this.scrollTop = this.eventscrollTop;
				this.classify_id = Item.classify_id;
				this.updateData();
				if (index == 0 || index == 1) return this.scrollIntoView = `sub0`
				this.scrollIntoView = `sub${index-1}`

			},
			scrolltolower() {
				if (!this.loadMore) return;
				this.page++;
				this.sortClassGoods();
			},
			changeSwiper(e) {
				this.current = e.detail.current + 1
			},
			Scroll(e) {
				this.eventscrollTop = e.detail.scrollTop
			},
			updateData() {
				this.scrollTop = 0;
				this.page = 1;
				this.loadMore = true;
				this.sortClassGoods();
			},
		},
		computed: {
			...mapState(['totalHeight', 'navHeight', 'color', 'System']),
			navBack_height() {
				return ['height:' + this.totalHeight + 'px'].join(';');
			},
			nav_box_height() {
				return ['height:' + this.navHeight + 'px'].join(';');
			},
			photoAll() {
				if (!this.Brand_info) return;
				return this.Brand_info.photoArr.length
			},
			subclass() {
				if (!this.structure.length) return
				const Item = this.structure[this.classifyIndex];
				if (!Item.list) return [];
				const all = {
					classify_id: Item.classify_id,
					classify_name: '全部'
				}
				if (Item.list[0].classify_name == '全部') {
					return Item.list
				} else {
					Item.list.unshift(all)
					return Item.list
				}
			},

			showBrandstyle() {
				let swiperHeight = 750;
				if (this.Brand_info.maxHeight) swiperHeight = this.Brand_info.maxHeight
				if (this.Show) {
					return ['height:' + swiperHeight + 'rpx'].join(';');
				} else {
					return ['height:' + '350rpx'].join(';');
				}
			}

		},


	}
</script>


<style lang="scss" scoped>
	.Warpper {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.Band {
		width: 100%;

		.swiperMin {
			height: 350rpx !important;
		}

		.swiperMax {
			height: 750rpx;
		}

		.swiperBox {
			width: 100%;
			overflow: hidden;
			position: relative;
			transition: height 0.5s ease;

			.Swiper {
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 666;
			}

			.opacity0 {
				opacity: 0 !important;
			}

			.opacity1 {
				opacity: 1 !important;
			}

			.Info {
				width: 100%;
				height: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: flex-end;
				opacity: 1;
				transition: opacity 0.4s ease;

				.brand_info {
					width: 100%;
					padding: 20rpx;
					background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 1) 70%);
					position: absolute;
					z-index: 888;
					display: flex;

					.brand_info_text {
						flex: 1;
						font-size: 28rpx;
						color: #333;
						line-height: 44rpx;
					}

					.swiperNum {
						padding: 2rpx 16rpx;
						background-color: #666666;
						border-radius: 20rpx;
						margin-left: 16rpx;
						color: #fff;
					}
				}
			}
		}

		.showDetails {
			margin-top: -80rpx;
			// background-image: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0.7) 90%);
			// box-shadow: 0 -10rpx 30rpx rgba(255, 255, 255, 0.9);
			border-top: none !important;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 1) 70%);
		}

		.branDetails {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 20rpx;
			position: relative;
			z-index: 888;
			border-top: 1px solid #f2f2f2;
			transition: margin-top 0.5s ease;

			.brand_logo {
				width: 140rpx;
				height: 140rpx;
				border: 1px solid #f2f2f2;
				border-radius: 10rpx;
				margin-right: 24rpx;
				background-color: #ffffff;
			}

			.details_info {
				flex: 1;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.brand_name {
					color: #000;
					font-size: 32rpx;
				}

				.branNum {
					padding: 0 10rpx;
					background-color: var(--color);
					color: #fff;
					font-size: 24rpx;
				}

				.details {
					padding: 6rpx 18rpx;
					background-color: var(--color);
					color: #fff;
					font-size: 24rpx;
					border-radius: 24rpx;
				}
			}
		}

	}


	.Sort {
		width: 100%;
		flex: 1;
		border-top: 1px solid #f2f2f2;
		display: flex;
		overflow: hidden;
		position: relative;

		.SortPop {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 888;
			background-color: rgba(0, 0, 0, 0);
		}

		.topSort {
			width: 200rpx;
			height: 100%;
			background-color: #f2f2f2;
			overflow-y: scroll;


			.top-level {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 26rpx;
				color: #000;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				position: relative;
			}

			.activate {
				background-color: #fff;
			}


		}

		.scrollBox {
			width: 550rpx;
			height: 100%;
			box-sizing: border-box;
			position: relative;


			.scroll-list {
				width: 100%;
				overflow: hidden;
				height: 80rpx;
				background-color: #fff;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;

				.sublevel {
					padding: 6rpx 24rpx;
					background-color: #f2f2f2;
					font-size: 24rpx;
					color: #333;
					border-radius: 20rpx;
					display: inline-block;
					margin-top: 20rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}

				.subActive {
					background-color: var(--color);
					color: #fff;
				}
			}

		}


		.scroll-View {
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			box-sizing: border-box;



		}

	}


	.navBack {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.nav_box {
			width: 100%;
			display: flex;
			align-items: center;
			overflow: hidden;

			.Back {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				background-color: rgba(204, 204, 204, 0.8);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 24rpx;

				.icon-xiangzuo {
					color: #fff;
				}
			}
		}
	}
</style>